<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       .query{
           border: 1px solid slateblue;
           margin-bottom: 5px;
           height: 30px;
           padding-top: 4px;
           padding-left: 4px;
           text-align: center; 
       }
       table{
           width: 100%;
       }
       table,td,th{
           border: 1px solid slateblue;
           border-collapse:collapse;
       }
       td{
           text-align: center;
       }
       tbody tr:nth-child(2){
           background-color: aliceblue;
       }
       tbody tr:hover{
           background-color:burlywood;
           cursor: pointer;
       }
       .gbtn_curd{
           float: left;
       }
       .gbtn_page{
           float: right;
       }
       #btn_query{
           margin-left: 10px;
       }
    </style>
    <script>
        function init(){
            document.getElementById("myTbody").addEventListener("dblclick",(event)=>{
                let currentNode=event.target;//获取被双击的格子
                let input=document.createElement("input");  //创建一个文本框
                input.type="text";
                input.value=currentNode.innerHTML;
                input.size=input.value.length;
                //设定文本框丢失焦点时消失，并同时将文本框中的数据加入td
                input.addEventListener("blur",(event)=>{
                    let pn=event.target.parentNode;
                    pn.innerHTML=event.target.value;
                },false);
                currentNode.innerHTML="";
                currentNode.appendChild(input);//将文本框作为current元素的子元素追加
                input.focus();  //解决无法获取焦点的bug
            },false);
        }
        window.addEventListener("load",init,false);
    </script>
</head>
<body>
    <nav class="query">
        <input type="search" name="keyword"><button id="btn_query">查询</button>
    </nav>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox"></th>
               <th>用户名</th>
               <th>密码</th>
               <th>性别</th>
               <th>邮箱</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="5">
                    <nav class="gbtn_curd">
                        <button>新增</button>
                        <button>修改</button>
                        <button>删除</button>
                    </nav>
                    <nav class="gbtn_page">
                        首页&nbsp;上一页&nbsp;
                        下一页&nbsp;尾页
                    </nav>
                </td>
            </tr>
        </tfoot>
        <tbody id="myTbody">
            <tr>
                <td><input type="checkbox" value="1"></td>
                <td>admin</td>
                <td>admin</td>
                <td>男</td>
                <td>391817046@qq.com</td>
            </tr>
            <tr>
                <td><input type="checkbox" value="2"></td>
                <td>test</td>
                <td>test</td>
                <td>女</td>
                <td>123@qq.com</td>
            </tr>
            <tr>
                <td><input type="checkbox" value="3"></td>
                <td>test01</td>
                <td>test01</td>
                <td>男</td>
                <td>456@qq.com</td>
            </tr>
            <tr>
                <td><input type="checkbox" value="4"></td>
                <td>manager</td>
                <td>manager</td>
                <td>女</td>
                <td>789@qq.com</td>
            </tr>
        </tbody>
    </table>
</body>
</html>